<template>
  <div class="search-input">
    <input
      type="text"
      :value="modelValue"
      @input="onInput"
      :placeholder="placeholder"
      :style="bindStyle"
    />
    <img
      v-show="!modelValue"
      class="logo"
      src="~/assets/images/common/search.png"
    />
    <img
      v-show="modelValue"
      @click="clearValue"
      class="logo"
      src="~/assets/images/common/clear.png"
    />
  </div>
</template>

<script setup lang="ts">
type Props = {
  modelValue: string;
  placeholder?: string;
  radius?: string;
  width?: string;
  height?: string;
};
const props = withDefaults(defineProps<Props>(), {
  placeholder: "请输入关键词",
  radius: "10px",
  width: "320px",
  height: "40px",
});

const bindStyle = computed(() => ({
  borderRadius: props.radius,
  width: props.width,
  height: props.height,
}));

const emit = defineEmits(["update:modelValue"]);

const onInput = (e: Event) => {
  const target = e.target as HTMLInputElement;
  emit("update:modelValue", target.value);
};

const clearValue = () => {
  emit("update:modelValue", "");
};
</script>
<style scoped lang="less">
.search-input {
  position: relative;
  position: relative;
  display: flex;
  align-items: center;
  display: inline-block;
  input {
    width: 100%;
    height: 100%;
    border: 1px solid #ccd6de;
    padding: 0 8px;
    padding-right: 32px;
    font-size: 14px;
    &:focus {
        border-color: #3d88f2;
    }
    &::placeholder {
      color: #ccd6de;
    }
  }
  .logo {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
  }
}
</style>
